<template>
	<el-main style="padding:0 20px;">
		<el-form :model="form" :disabled="mode=='show'" ref="dialogForm" label-width="100px" >
			<el-descriptions :column="1" border size="small">
				<el-descriptions-item label="台站">{{form.fullorgName}}</el-descriptions-item>
				<el-descriptions-item label="发射机编号">{{form.TransmitterNumber}}</el-descriptions-item>
				<el-descriptions-item label="天线编号">{{form.AnntenaNumber}}</el-descriptions-item>
				<el-descriptions-item label="预警频率">{{form.Frequency}}</el-descriptions-item>
				<el-descriptions-item label="预警功率">{{form.Capacity}}</el-descriptions-item>
				<el-descriptions-item label="报警类型">{{form.typelabel}}</el-descriptions-item>
			</el-descriptions>
			<el-collapse v-model="activeNames" style="margin-top: 20px;">
				<el-collapse-item title="常规" name="1">
					<el-alert title="" :type="typeMap[form.level]" :closable="false">{{form.AlertContent}}</el-alert>
				</el-collapse-item>
				<el-collapse-item title="详细" name="2">
					<div class="code">{{form.DataSnapshot}}</div>
				</el-collapse-item>
				<el-collapse-item title="处置" name="3">
					<div>处置方式</div>
					<el-select v-model="form.transactionType" filterable style="width: 50%">
						<el-option v-for="item in TransactionTypes" :key="item.value" :label="item.label" :value="item.value*1"/>
					</el-select>
					<div>处置内容</div>
					<el-input v-model="form.trackcontent" placeholder="处置内容" clearable type="textarea"></el-input>
					<div>处置人</div>
					<el-select v-model="form.tracker" filterable style="width: 50%">
						<el-option v-for="item in users" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
					<div>处置时间</div>
					<el-date-picker v-model="form.tracktime" type="datetime" placeholder="选择时间" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" :clearable='false' :editable="false"></el-date-picker>
					<div style="margin-top: 10px;">
						<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">处置</el-button>
					</div>
				</el-collapse-item>
			</el-collapse>
		</el-form>
	</el-main>
</template>

<script>
	export default {
		data() {
			return {
				mode: "edit",
				//表单数据
				form: {},
				TransactionTypes:[],
				users:[],
				activeNames: ['1','3'],
				typeMap: {
					'info': "info",
					'warn': "warning",
					'error': "error",
					'fatal': "fatal",
					'debug': "debug"
				},
				selectDatetime:'',
				isSaveing: false,
			}
		},
		created(){
			this.initData({});
			this.getUser();
			this.getTransactionType();
		},
		methods: {
			//显示
			open(mode='edit'){
				this.mode = mode;
				this.visible = true;
				return this
			},
			setData(data){
				Object.assign(this.form, data)
				// Object.assign(this.data, data)   //不是直接修改原值，而是复制一份显示
			},
			async initData(data) {
				//获取当前时间
				var now   = new Date();
				var monthn = now.getMonth()+1;
				var yearn  = now.getFullYear();
				var dayn = now.getDate();
				var h = now.getHours();
				var m =now.getMinutes();
				var s = now.getSeconds();
				this.selectDatetime = yearn+"-"+monthn+"-"+dayn+" "+h+":"+m+":"+s;
				this.selectUser = parseInt(sessionStorage.getItem("userid"));
			},
			async getUser(){
				var res = await this.$API.system.user.all.get();
				this.users.push(...res.data)
			},
			async getTransactionType(){
				var res = await this.$API.system.dic.listBycode.get({code: 'AlertTransactionType' });
				this.TransactionTypes = res.data.rows.map((item,index) => {
                    return Object.assign({},{label:item.name,value:item.key})
				})
			},
			submit(){
				this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
						var res = await this.$API.system.alert.track.post(this.form);
						this.isSaveing = false;
						if(res.code == 200){
							this.$emit('success', this.form, this.mode)
							this.visible = false;
							this.$message.success("操作成功")
							this.$emit('closeDrawer',false)
						}else{
							this.$alert(res.message, "提示", {type: 'error'})
						}
					}else{
						return false;
					}
				})
			},
		}
	}
</script>

<style scoped>
	.code {background: #848484;padding:15px;color: #fff;font-size: 12px;border-radius: 4px;}
</style>
